<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title>Q易云 共享生活</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<style type="text/css"> 
.linear{ 
	width:102%; 
	height: 153px;
	background:-moz-linear-gradient(top,#f4f4f5,#eeeef0);/*火狐*/ 
	background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#f4f4f5), to(#eeeef0));/*谷歌*/ 
	background: -ms-linear-gradient(top, #f4f4f5,  #eeeef0);        /* IE 10 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f5), to(#eeeef0));      /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(top, #f4f4f5, #eeeef0);   /*Safari5.1 Chrome 10+*/
	background: -o-linear-gradient(top, #f4f4f5, #eeeef0);  /*Opera 11.10+*/
} 
.linear2{ 
	width:102%; 
	height: 600px;
	background:-moz-linear-gradient(top,#eeeef0,#E3E4E6);/*火狐*/ 
	background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#eeeef0), to(#E3E4E6));/*谷歌*/ 
	background: -ms-linear-gradient(top, #eeeef0,  #E3E4E6);        /* IE 10 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeef0), to(#E3E4E6));      /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(top, #eeeef0, #E3E4E6);   /*Safari5.1 Chrome 10+*/
	background: -o-linear-gradient(top, #eeeef0, #E3E4E6);  /*Opera 11.10+*/
} 

.onShow,.onFocus,.onError,.onCorrect,.onLoad {
	background: url(../images/validator/reg_bg.png) no-repeat 3000px 3000px;
	padding-left: 30px;
	font-size: 12px;
	height: 25px;
	width: 124px;
	display: inline-block;
	line-height: 25px;
	vertical-align: middle;
	overflow: hidden;
	margin-left: 6px;
}


</style> 
<script src="js/jquery-1.11.1.js"></script>
<script src="js/validator/formValidator_min.js" type="text/javascript"
	charset="UTF-8"></script>
<script src="js/validator/formValidatorRegex.js" type="text/javascript"
	charset="UTF-8"></script>
<script type="text/javascript">
	$(document).ready(function(){{
		$(".rgs").click(function(){
				$("#log").hide();
				$("#reg").slideDown(1000);
		})
		$("#lgs").click(function(){
			
				$("#reg").hide();
			 	$("#log").fadeIn(2000);
		})
		
	//注册页面js
		$.formValidator.initConfig({
							formid : "reg_form",
							debug : false,
							submitonce : true,
							onerror : function(msg, obj, errorlist) {
								//$.map(errorlist,function(msg1){alert(msg1)});
								alert(msg);
							}
						});
						$("#t_UserNameReg").formValidator({
							onshow : "",
							onfocus : "",
							oncorrect : ""
						}).inputValidator({
							min : 4,
							max : 18,
							onerror : "用户名不合法"
						}).regexValidator({
							regexp : "username",
							datatype : "enum",
							onerror : "用户名格式不合法"
						});
						
						$("#t_UserPassReg").formValidator({
							onshow : "",
							onfocus : "",
							oncorrect : ""
						}).inputValidator({
							min : 4,
							max : 18,
							empty : {
								leftempty : false,
								rightempty : false,
								emptyerror : "用户密码是必须的"
							},
							onerror : "输入至少4个字符"
						});
						$("#t_RePass").formValidator({
							onshow : "",
							onfocus : "",
							oncorrect : ""
						}).inputValidator({
							min : 4,
							max : 18,
							empty : {
								leftempty : false,
								rightempty : false,
								emptyerror : "密码不能为空"
							},
							onerror : "密码位数不正确"
						}).compareValidator({
							desid : "t_UserPassReg",
							operateor : "=",
							onerror : "两次密码不一致"
						});
						$("#t_Email")
								.formValidator({
									empty : true,
									onshow : "",
									onfocus : "",
									oncorrect : "",
									defaultvalue : ""
								})
								.inputValidator({
									min : 6,
									max : 20,
									onerror : "邮箱长度必须为6-20位"
								})
								.regexValidator(
										{
											regexp : "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
											onerror : "邮箱格式不正确"
								});
						$("#t_CheckCode").formValidator({
							empty : false,
							onshow : "",
							onfocus : "",
							oncorrect:"",
						}).inputValidator({
							min : 4,
							max : 6,
							onerror : "验证码长度非法"
						})

		$("#t_UserName").formValidator({
			onshow : "",
			onfocus : function(){
				$("#warn").html("");
			},
			oncorrect : ""
		}).inputValidator({
			min : 4,
			max : 18,
			onerror : "用户名为4-18个字符"
		}).regexValidator({
			regexp : "username email",
			datatype : "enum",
			onerror : "格式有误"
		});

		$("#t_UserPass").formValidator({
			onshow : "",
			onfocus : function(){
				$("#warn").html("");
			},
			oncorrect : ""
		}).inputValidator({
			min : 4,
			max : 18,
			empty : {
				leftempty : false,
				rightempty : false,
				emptyerror : "请输入密码"
			},
			onerror : "密码输入有误"
		});
		
		$(".img").click(function(){
			var timenow = new Date().getTime();
			this.src = "ValidateImage?d=" + timenow;
		})
	}})
</script>

</head>

<body style="background-color: #E3E4E6">
	<div class="linear" style=" margin: -5px;">
		<img src="photo/yun3.gif" />
	</div>
	<div class="linear2">
		<div id="log" style="margin: 0 auto;background-color:#FEFEFE; width:400px; height: 400px; border: solid 1px silver;">
			<form action="login" method="post" name="form1" id="login_form">
				<div style="margin: 0 auto; height: 45px;width: 340px;font-size: 30px;font-weight:bold; font-family: Microsoft">Q易云登录</div>
				<div style="margin: 0 auto; height: 25px;width: 340px; color:red"><span id="t_UserNameTip" class="onshow"></span><span id="t_UserPassTip" class="onshow"></span><center id="warn" color="red" size="3"><s:property value="tip" /></center></div>
				<div style=" margin: 0 auto; height: 126px;width: 340px;border: silver 1px solid;">
					<div><em  style="margin-left:2px; position:absolute ;margin-top:18px; width:25px;height:25px; background: url('photo/user.png') "></em></div><input class="reg_input"
							name="username" id="t_UserName" style="margin-left:30px; height: 62px;width: 280px;outline:none; border:0px none; border-bottom: 1px solid #D2D3D4; font-size: 20px;" type="text" placeholder="邮箱/用户名"/><br/>
					<div><em  style="margin-left:2px;position:absolute;margin-top:18px; width:25px;height:25px; background: url('photo/pass.png') "></em></div> <input  class="reg_input" id="t_UserPass" name="password" style="margin-left:30px;height: 62px;width: 280px;outline:none; border:none;font-size: 20px;" type="password" placeholder="密码"/>
				</div>
				<div style="margin: 0 auto; height: 40px;width: 340px;">
					<span style="float: right;margin-top: 10px;"><a href="#" style="color:#007AC6">忘记密码？</a></span>
				</div>
				<div style="margin: 0 auto; height: 40px;width: 340px;">
					<button type="submit" class="login" style=" cursor: pointer; background-color: #FF6224;width: 340px;height: 50px;border-radius: 5px;color: white;font-weight:bold; font-size: 22px;">登&nbsp;录</button>
				</div>
			</form>
				<div style=" height: 80px;width: 100%; margin-top:42px;">
					<button class="rgs" style="border:none; background-color:#59bac4; cursor: pointer;width: 100%;height: 100%;color: white;font-weight:bold; font-size: 30px;">立即注册云账号</button>
				</div>
		</div>
		
		<div id="reg" style="display:none; margin: 0 auto;background-color:#FEFEFE; width:400px; height: 500px; border: solid 1px silver;">
			<form action="userRegister" method="post" name="form1" id="reg_form">
				<div style="background-color:#78BA12;color:white; height: 70px;width: 100%px;font-size: 30px;font-weight:bold; font-family: Microsoft"><center>快速注册</center></div>
				<div style="margin-left: 15px;margin-top:20px; height: 70px;width: 100%;">
					<label style="font-weight: bold;color:gray;">用户名:&nbsp&nbsp</label><input class="reg_input" name="username" id="t_UserNameReg" style="font-size:18px;outline:none; height:40px; ;width:280px ;" type="text" placeholder="邮箱/用户名" />
					<span style="color:red; margin-left:50px;" id="t_UserNameRegTip" class="onshow"></span>
				</div>
				<div style="margin-left: 15px;height: 70px;width: 100%;">
					<label style="font-weight: bold;color:gray;">密码:&nbsp&nbsp&nbsp&nbsp</label><input id="t_UserPassReg" name="password" class="reg_input" style="font-size:18px;outline:none;height:40px; ;width:280px ;" type="password" placeholder="密码" />
					<span style="color:red; margin-left:50px;" id="t_UserPassRegTip" class="onshow"></span>
				</div>
				<div style="margin-left: 15px;height: 70px;width: 100%;">
					<label style="font-weight: bold;color:gray;">重复密码:</label><input id="t_RePass" name="t_RePass" class="reg_input" style="font-size:18px;outline:none;height:40px;width:280px ;" type="password" placeholder="重复密码" />
					<span style="color:red; margin-left:50px;" id="t_RePassTip" class="onshow"></span>
				</div>
				<div style="margin-left: 15px;height: 70px;width: 100%;">
					<label style="font-weight: bold;color:gray;">邮箱:&nbsp&nbsp&nbsp&nbsp</label><input id="t_Email" class="reg_input" name="email" style="font-size:18px;outline:none;height:40px;width:280px ;" type="text" placeholder="邮箱" />
					<span style="color:red; margin-left:50px;" id="t_EmailTip" class="onshow"></span>
				</div>
				<div style="margin-left: 15px;height: 70px;width: 100%;">
					<label style="font-weight: bold;color:gray;">验证码:&nbsp&nbsp</label><input id="t_CheckCode" class="reg_input_pic" name="checkCode" maxlength="6" style="font-size:18px;outline:none;height:40px;" type="text" placeholder="验证码" />
					<img class="img" src="ValidateImage" width="60" height="30"/>
					<span style="color:red; margin-left:50px;" id="t_CheckCodeTip" class="reg_m onError in_pic_s"></span>
				</div>
				<div><span id="lgs"  style="float:right;margin-right:10px;font-size: 12px;"><a href="#" >返回登录页面</a></span></div>
				<div style=" height: 80px;width: 100%; margin-top:42px;">
					<button type="submit" class="rgs" style="border:none; background-color:#59bac4; cursor: pointer;width: 100%;height: 100%;color: white;font-weight:bold; font-size: 30px;">点击注册</button>
				</div>
			</form>
		</div>
		
	</div>
	
		

	
	

</body>
</html>